<!--
 * @Author: 尹书延
 * @Date: 2021-11-23 18:33:21
 * @LastEditTime: 2021-11-29 13:57:46
-->
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex 响应式布局示例</title>
    <link rel="stylesheet" href="./dist/index.css" />
  </head>
  <body>
    <div style="width: 100%">
      <div class="settings">当前宽度: <span id="doc-width"></span></div>
      <div class="settings">
        当前模式：<span
          id="flex-type"
          class="btn"
          style="padding: 4px 8px; width: 96px"
        ></span>
      </div>
    </div>
    <div style="width: 100%">
      <div class="settings">
        宽屏：1400px以上<br />
        <!-- 宽度：<input id="lg-wid" value="1400" type="number" /><br /> -->
        列数：<input id="lg-col" value="4" type="number" /><br />
        间距：<input id="lg-gap" value="12" type="number" />px<br />
      </div>
      <div class="settings">
        中屏：1000px以上<br />
        <!-- 宽度：<input id="md-wid" value="1000" type="number" /><br /> -->
        列数：<input id="md-col" value="3" type="number" /><br />
        间距：<input id="md-gap" value="9" type="number" />px<br />
      </div>
      <div class="settings">
        窄屏：700px以上<br />
        <!-- 宽度：<input id="sm-wid" value="700" type="number" /><br /> -->
        列数：<input id="sm-col" value="2" type="number" /><br />
        间距：<input id="sm-gap" value="6" type="number" />px<br />
      </div>
      <div class="settings">
        极窄屏：700px以下<br />
        <!-- 宽度：<input id="sm-wid" value="700" type="number" /><br /> -->
        列数：<input id="xs-col" value="1" type="number" /><br />
        间距：<input id="xs-gap" value="3" type="number" />px<br />
      </div>
    </div>
    <p></p>
    <div id="flex-container" class="container"></div>
    <script src="./dist/index.js"></script>
  </body>
</html>
